import React, { useState, useCallback, useEffect } from "react";
import { Switch } from "antd";
import cls from "classnames";
import Link from "next/link";

import style from "./index.module.scss";
import { useRouter } from "next/router";
import { Search } from "../Search";
import { useAffix } from "./useAffix";
import { useDark } from "@/hooks/useDark";

interface IProps {
  setting: any;
  menu: any;
}

const Sun = ``;
const Moon = ``;

export const ToggleTheme = () => {
  const [dark, setDark] = useState(false);
  // 第一次是否是黑暗模式
  const defaultDark = useDark();
  const onChange = useCallback(
    val => {
      if (typeof window === "undefined") {
        return;
      }
      if (val) {
        document.body.classList.add("dark");
        localStorage.setItem("isDark", JSON.stringify(true));
      } else {
        localStorage.setItem("isDark", JSON.stringify(false));
        document.body.classList.remove("dark");
      }
      setDark(val);
    },
    [defaultDark]
  );
  useEffect(() => {
    if (defaultDark) {
      setDark(true);
      document.body.classList.add("dark");
    }
  }, [defaultDark]);
  return (
    <Switch
      checked={dark}
      unCheckedChildren={
        <img
          src={Sun}
          width="16"
          height="16"
          role="presentation"
          style={{ pointerEvents: "none" }}
        ></img>
      }
      checkedChildren={
        <img
          src={Moon}
          width="16"
          height="16"
          role="presentation"
          style={{
            pointerEvents: "none"
          }}
        ></img>
      }
      onChange={onChange}
    />
  );
};

export const Header: React.FC<IProps> = ({ setting, menu }) => {
  const router = useRouter();
  const asPath = router.asPath;
  const pathname = router.pathname;
  // 是否固定/固定显示
  const [affix, affixVisible] = useAffix();
  // 搜索显示
  const [showSearch, setShowSearch] = useState(false);
  // 移动端菜单显示
  const [visible, setVisible] = useState(false);
  return (
    <header className={cls(style.header)}>
      <div
        className={cls(
          style.wrapper,
          affix ? style.affix : false,
          affixVisible ? style.visible : false
        )}
      >
        <div className={"container"}>
          <div className={style.logo}>
            {/^http/.test(setting?.systemLogo) ? (
              <Link href="/">
                <a>
                  <img src={setting?.systemLogo} />
                </a>
              </Link>
            ) : (
              <Link href="/">
                <a
                  dangerouslySetInnerHTML={{
                    __html: setting?.systemLogo
                  }}
                ></a>
              </Link>
            )}
          </div>
          <nav className={cls(style.nav, visible ? style.active : false)}>
            <ul>
              {menu.map(m => (
                <li
                  key={m.label}
                  className={cls({
                    [style.active]:
                      pathname === m.path ||
                      asPath === m.path ||
                      (m.dynamicPath && pathname === m.dynamicPath)
                  })}
                >
                  {/page/.test(m.path) ? (
                    <Link href={"/page/[id]"} as={m.path}>
                      <a>{m.label}</a>
                    </Link>
                  ) : (
                    <Link href={m.path}>
                      <a>{m.label}</a>
                    </Link>
                  )}
                </li>
              ))}
              <li
                className={style.searchWrapper}
                onClick={() => setShowSearch(true)}
              >
                <a className={style.search}></a>
              </li>
              <li className={style.themeToggle}>
                <ToggleTheme />
              </li>
            </ul>
          </nav>
          <div
            className={cls(style.mobileTrigger, visible ? style.active : false)}
            onClick={() => setVisible(!visible)}
          >
            <div className={style.stick}></div>
            <div className={style.stick}></div>
            <div className={style.stick}></div>
          </div>
          <Search onClose={() => setShowSearch(false)} visible={showSearch} />
        </div>
      </div>
    </header>
  );
};
